<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <div>我叫{{ name }}，今年{{age}}岁，性别{{sex}}，爱好{{hobby}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
    </div>
</body>
<script>
    function Vue(ops){
        const {el="", data={}} = ops;
        const element = document.querySelector(el);
        const str = element.innerHTML;
        render(element, str, data);

        function render(el, str, obj){
            const arr = [];
            for(let i in obj){
                const reg = new RegExp("{{ *"+ i +" *}}", "g");
                arr.push(...str.match(reg));
            }
            arr.forEach(val=>{
                const reg = /[^{{ }}]+/;
                str = str.replace(val, obj[val.match(reg)[0]]);
            })
            el.innerHTML = str;
        }

        return new Proxy(data, {
            get(origin, attrs){
                return origin[attrs];
            },
            set(origin, attrs, value){
                origin[attrs] = value;
                render(element, str, data);
            }
        })
    }
    
    const vm = new Vue({
        el:".app",
        data:{
            name:"张三",
            age:21,
            sex:"男"
        }
    })

    vm.hobby = "篮球"

    
</script>
</html>